<template>
  <div class="fa-text-setting">
    <ElFormItem v-if="showPlaceholder" prop="placeholder" label="文本提示">
      <ElInput
        class="el-input__limit-clearable"
        v-model="text.placeholder"
        :disabled="disabled"
        :maxlength="50"
        placeholder="请输入文本提示"
        clearable
        show-word-limit
        @blur="text.placeholder = text.placeholder ? text.placeholder.trim() : ''"
      />
    </ElFormItem>

    <slot />

    <WidgetSourceSetting v-if="showDefaultValue" :data="data" :label="defaultValueLabel" :disabled="disabled">
      <ElInput
        v-model="data.value"
        :type="defaultValueType"
        :disabled="disabled"
        :rows="3"
        :maxlength="data.text.maxLength"
        :placeholder="`请输入${defaultValueLabel}`"
        clearable
        :show-word-limit="defaultValueLimit"
        @blur="data.value = data.value.trim()"
      />
    </WidgetSourceSetting>

    <ElFormItem v-if="showFontFamily" prop="fontFamily" label="字体类型">
      <ElSelect v-model="text.fontFamily" popper-class="fa-contract-scope" :disabled="disabled">
        <ElOption
          v-for="[key, text] in input.fontFamilies"
          :key="key"
          :value="key"
          :label="text"
          :style="{ fontFamily: text }"
        />
      </ElSelect>
    </ElFormItem>

    <ElRow :gutter="8">
      <ElCol :span="showTextAlign ? 10 : 24">
        <ElFormItem prop="fontSize" label="字号">
          <ElSelect v-model.trim="text.fontSize" popper-class="fa-contract-scope" :disabled="disabled">
            <ElOption v-for="size in input.fontSizes" :key="size" :value="size" :label="`${size}px`" />
          </ElSelect>
        </ElFormItem>
      </ElCol>

      <ElCol v-if="showTextAlign" :span="14">
        <ElFormItem prop="textAlign" label="对齐方式">
          <div class="fa-radio-button-group" :class="{ 'is-disabled': disabled }">
            <ElTooltip v-for="item in input.textAlign" :key="item.value" :content="item.text" placement="top">
              <div
                class="fa-radio-button"
                :class="[item.icon, { 'is-active': text.textAlign === item.value }]"
                :value="item.value"
                @click="!disabled && (text.textAlign = item.value)"
              />
            </ElTooltip>
          </div>
        </ElFormItem>
      </ElCol>
    </ElRow>

    <slot name="after" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, PropType, reactive } from 'vue'
import { TextData, TextAlignMap } from '@/types'
import { Widget } from '@/models'
import config from '@/config'
import WidgetSourceSetting from '@/components/widget-source/WidgetSourceSetting.vue'

/** 文本框设置 */
export default defineComponent({
  name: 'FaTextSetting',
  components: { WidgetSourceSetting },

  props: {
    /** 控件数据 */
    data: {
      type: Widget,
      required: true
    },

    /** 是否禁用 */
    disabled: {
      type: Boolean,
      default: false
    },

    /** 展示文本提示 */
    showPlaceholder: {
      type: Boolean,
      default: false
    },

    /** 展示默认值 */
    showDefaultValue: {
      type: Boolean,
      default: false
    },

    /** 默认值 label */
    defaultValueLabel: {
      type: String,
      default: '默认文本内容'
    },

    /** 默认值文本框类型 */
    defaultValueType: {
      type: String as PropType<'textarea' | 'text'>,
      default: 'text'
    },

    /** 默认值是否展示长度限制 */
    defaultValueLimit: {
      type: Boolean,
      default: true
    },

    /** 展示字体类型 */
    showFontFamily: {
      type: Boolean,
      default: true
    },

    /** 展示文本对齐 */
    showTextAlign: {
      type: Boolean,
      default: true
    }
  },

  setup(props) {
    return {
      /** 文本框选项 */
      input: reactive({
        fontSizes: config.fontSizes,
        fontFamilies: config.fontFamilies,
        textAlign: Array.from(TextAlignMap.values())
      }),

      /** 文本选项 */
      text: computed(() => props.data.text as TextData)
    }
  }
})
</script>
